<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Syncing charts</title>


  <link href="../assets/styles.css" rel="stylesheet" />

  <style>
    #wrapper {
      padding-top: 20px;
      padding-left: 10px;
      padding-right: 10px;
      background: #fff;
      border: 1px solid #ddd;
      box-shadow: 0 22px 35px -16px rgba(0, 0, 0, 0.1);
      max-width: 650px;
      margin: 35px auto;
    }

    .github-style {
      clear: both;
      font-weight: 400;
      height: 40px;
      margin-left: 6px;
    }

    .github-style a {
      color: #0366d6;
      font-size: 18px;
    }

    .github-style .cmeta {
      display: block;
      color: #777;
      font-weight: 400;
    }

    .github-style .userimg {
      float: left;
      display: block;
      border-radius: 3px;
    }

    .github-style .userdetails {
      float: left;
      margin-left: 10px;
    }
  </style>
</head>

<body>
  <div id="wrapper">
    <div id="chart-area">

    </div>
    <h5 class="github-style">
      <img class="userimg" src="https://picsum.photos/200/200/?image=1031" data-hovercard-user-id="634573" class="avatar float-left mr-2"
        alt="" width="38" height="38" />
      <div class="userdetails">
        <a class="username">coder</a>
        <span class="cmeta">
          <span class="commits"></span> commits
        </span>
      </div>
    </h5>

    <div id="chart-area2">

    </div>
  </div>



  <script src="../../dist/apexcharts.js"></script>
  <script src="../assets/github-data.js"></script>

  <script>
    var optionsarea2 = {
      chart: {
        type: 'area',
        height: 160,
        background: '#F6F8FA',
        toolbar: {
          show: false,
        },
        events: {
          mounted: function (chart) {
            var commitsEl = document.querySelector('p span.commits');
            var commits = chart.getSeriesTotalXRange(chart.w.globals.minX, chart.w.globals.maxX)

            commitsEl.innerHTML = commits
          },
          updated: function (chart) {
            var commitsEl = document.querySelector('.cmeta span.commits');
            var commits = chart.getSeriesTotalXRange(chart.w.globals.minX, chart.w.globals.maxX)

            commitsEl.innerHTML = commits
          }
        }
      },
      colors: ['#FF7F00'],
      stroke: {
        width: 0,
        curve: 'smooth'
      },
      dataLabels: {
        enabled: false
      },
      fill: {
        opacity: 1,
        type: 'solid'
      },
      series: [{
        name: 'commits',
        data: githubdata.series
      }],
      yaxis: {
        tickAmount: 3,
        labels: {
          show: false
        }
      },
      xaxis: {
        type: 'datetime',
      }
    }

    var chartarea2 = new ApexCharts(
      document.querySelector("#chart-area2"),
      optionsarea2
    );

    chartarea2.render();

    var options = {
      chart: {
        height: 200,
        type: 'area',
        background: '#F6F8FA',
        toolbar: {
          autoSelected: 'selection',
        },
        selection: {
          xaxis: {
            min: new Date('05 Jan 2014').getTime(),
            max: new Date('04 Jan 2015').getTime()
          }
        },
        events: {
          selection: function (chart, e) {
            chartarea2.updateOptions({
              xaxis: {
                min: e.xaxis.min,
                max: e.xaxis.max
              }
            }, false, false)
          },
          updated: function (chart, e) {
            chartarea2.updateOptions({
              xaxis: {
                min: e.config.xaxis.min,
                max: e.config.xaxis.max
              },
            }, false, false)
          }
        },

      },
      colors: ['#7BD39A'],
      dataLabels: {
        enabled: false
      },
      stroke: {
        width: 0,
        curve: 'smooth'
      },

      series: [{
        name: 'commits',
        data: githubdata.series
      }],
      fill: {
        opacity: 1,
        type: 'solid'
      },
      legend: {
        position: 'top',
        horizontalAlign: 'left'
      },
      xaxis: {
        type: 'datetime'
      },
    }

    var chart = new ApexCharts(
      document.querySelector("#chart-area"),
      options
    );

    chart.render();
  </script>
</body>

</html>